<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>活动管理后台</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body class="layui-layout-body" >
<div class="layui-layout layui-layout-admin">

  <div data-th-replace="~{layout :: header}"></div>
  <div class="layui-body" style="left: 220px;top:100px">
    <!-- 内容主体区域 -->
 
    <div>
   		<a href="/activity/add"  class="layui-btn  ">创建活动</a>
    </div>
    <table class="layui-table" >

	  <colgroup>
	    <col width="150">
	    <col width="200">
	    <col>
	  </colgroup>
	  <thead>
	    <tr>
    	  <th><b>序号</b></th>
	      <th><b>名称<b/></th>
	      <th><b>活动banner<b/></th>
	      <th><b>活动链接</b></th>
	      <th><b>活动时间</b></th>
	      <th><b>报名人数</b></th>
	      <th><b>评论数</b></th>
	      <th><b>状态</b></th>
	      <th><b>操作</b></th>
	    </tr> 
	  </thead>
	  <tbody>
	    <tr data-th-each="activity, iterStat : ${activities}" >
   		  <td data-th-text="${iterStat.count}+${pageIndex-1}*${pageSize}"></td>
	      <td data-th-text="${activity.name}"></td>
	      <td ><img alt="" data-th-src="${activity.bannerUrl}"></td>
	      <td data-th-text="${activityBaseUrl + activity.id}"></td>
	      <td data-th-text="${#calendars.format(activity.effectTime, 'yyyy-MM-dd HH:mm') + '~' + #calendars.format(activity.expireTime, 'yyyy-MM-dd HH:mm')}">活动时间</td>
	      <td ><a style="text-decoration:underline" th:href="@{/apply/list(activityId=${activity.id})}"   data-th-text="${activity.applyNum}"></a></td>
	      <td ><a style="text-decoration:underline" th:href="@{/comment/list(activityId=${activity.id})}"   data-th-text="${activity.commentNum}"></a></td>
	      <td data-th-text="${activity.status} == 1 ? '已上架':'已下架'"></td>
	      <td>
				<a th:onclick="'javascript:preview(\'' + ${activityBaseUrl + activity.id} + '\');'"   class="layui-btn  layui-btn-xs layui-btn-normal">预览</a>
				<a th:href="@{/activity/info(id=${activity.id})}"  class="layui-btn  layui-btn-xs ">编辑</a>
				<a th:onclick="'javascript:publishActivity(' + ${activity.id} + ',' + ${activity.status} + ');'"   th:text="${activity.status} == 2 ? '上架':'下架'" class="layui-btn  layui-btn-xs  layui-btn-warm">下架</a>
				<a th:onclick="'javascript:delActivity(' + ${activity.id} + ');'"  class="layui-btn  layui-btn-xs  layui-btn-danger">删除</a>
 		  </td>
	    </tr >

	  </tbody>
	</table>
	
	<div id="pageContent"></div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->

  </div>
</div>

<!-- <script src="/layui/jquery.min.js"></script>
<script src="/layui/layui.js"></script> -->
<script>
//JavaScript代码区域
	

layui.use('laypage', function(){
	  var laypage = layui.laypage;
	  var layer = layui.layer;
	  
	  //执行一个laypage实例
	  laypage.render({
		  elem: 'pageContent'
		  ,count:[[${total}]] //数据总数，从服务端得到
		  ,curr: [[${pageIndex}]]
		  ,layout:['count','prev', 'page', 'next','skip']
		  ,jump: function(obj, first){
			  console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
			    console.log(obj.limit); //得到每页显示的条数
		    //首次不执行
		   if(!first){

		      window.location.href = '/activity/list?pageIndex=' + obj.curr + "&pageSize=" + obj.limit;

		    } 
		  }
		}); 
	});

/* 活动预览 */
function preview(jumpUrl) {

     if (jumpUrl){
         layer.open({
             type: 2,
             title: '活动预览',
             area: ['375px', '667px'], //自定义文本域宽高
             resize: false,
             content: jumpUrl //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
         });
     }else {
         alert("预览异常");
     }
}

function delActivity (id){
    layer.confirm('确认删除吗?', function(index){
        $.ajax({
            type: "POST",
            data: {id: id},
            url: "/activity/del",
            dataType: "json",
            success: function (msg) {
            	console.log(msg);
                if (msg.meta.code == 0) {
                	window.location.href = '/activity/list?pageIndex=' + [[${pageIndex}]] + "&pageSize=" + [[${pageSize}]];
                    layer.msg(msg.meta.message);

                } else {
                    layer.msg(msg.meta.message);
                }
            }
        });
        layer.close(index);
    })
}

function publishActivity (id, status) {
	var str = '上架';
	if (status == 1)　 str='下架';
    layer.confirm('确认进行'+ str +'操作吗?', function(index){
        $.ajax({
            type: "POST",
            data: {id: id,status: status},
            url: "/activity/publish",
            dataType: "json",
            success: function (msg) {
            	console.log(msg);
                if (msg.meta.code == 0) {
                	window.location.href = '/activity/list?pageIndex=' + [[${pageIndex}]] + "&pageSize=" + [[${pageSize}]];
                    layer.msg(msg.meta.message);

                } else {
                    layer.msg(msg.meta.message);
                }
            }
        });
        layer.close(index);
    })
}

</script>
</body>
</html>